<template>
  <div style="display: flex; justify-content: center; align-items: center">
    <!-- 打印表格页面 -->
    <div id="print" ref="print">
      <!-- 存根部分 -->
      <h1 style=" font-size: 20px; text-align: center">
        广西水利电力职业技术学院学生证明
      </h1>
      <br />
      <h2
        style="
          font-size: 15px;
          text-align: center;
          margin-top: -10px;
          letter-spacing: 30px;
        "
      >
        （存根）
      </h2>
      <br />
      <h3 style="font-size: 15px; text-align: right; margin-top: -15px;margin-right: 120px">
        证明编号：
      </h3>
      <pre><p style="font-size: 15px; text-align: left">证明使用人: 姓    名 : {{ form.name }}</p></pre>
      <pre><p style="font-size: 15px; text-align: left">            性    别 ：{{ form.sex }}</p></pre>
      <pre><p style="font-size: 15px; text-align: left">            入学时间 : {{ form.Intake | formatDate   }}</p></pre>
       <pre><p style="font-size: 15px; text-align: left">      所在学院及专业 : {{form.college}} 学院 {{form.major}} 专业</p></pre>
      <pre><p style="font-size: 15px; text-align: left">           经办人：{{ form.xgname }}</p></pre>
      <pre><p style="font-size: 15px; margin-left: 300px;margin-top: -30px">       开具日期：{{form.xgtime| formatDate}}</p></pre>
      <hr style="size:1;width:300;"  >
      <!-- 证明 -->
      <h1 style="font-size: 40px; text-align: center">证明</h1>
      <pre><p style="font-size: 20px; text-align: right">（编号：          ）</p></pre>
      <div style="width:600px;position:relative">
        <img style="position: absolute; bottom: 0;width: 150px;left: 50px;opacity: 0.4;top:150px;" src="../../../../assets/logo/logo.png" alt="">
        <div style="text-indent:2em;font-size: 25px;">兹有我校学生 {{ form.name }}，性别 {{ form.sex }}，{{form.nation}}族，于{{form.birthday| formatDate}}出生（身份证号为：{{form.identityCard}} ），
         {{ form.jg }}（省、市、区）{{form.county}} (县、市)人，现家住{{form.homeaddress}}，该生于{{ form.Intake | formatDate   }}录取到
         我校{{form.college}} 学院 {{form.major}}专业学习，全日制大专三年。</div>
         <div style="text-indent:2em;font-size: 25px;">
          特此证明。
         </div>
         <div style="font-size: 25px;text-align: right">广西水利电力职业技术学院</div>
         <div style="font-size: 25px;text-align: right;margin-right: 70px">学生工作处</div>
         <div style="font-size: 25px;text-align: right;margin-right: 50px"> {{form.xgtime| formatDate}}</div>
         <div style="font-size: 25px; text-align: left">查询电话：0771-2085115</div>
      <!-- <pre><p style="font-size: 20px; text-align: center">兹有我校学生 {{ form.name }}，性别 {{ form.sex }}，{{form.nation}}族，</p></pre>
      <pre><p style="font-size: 20px; text-align: center">于{{form.birthday| formatDate}}出生（身份证号为：{{form.identityCard}} ），</p></pre>
      <pre><p style="font-size: 20px; text-align: center"> {{ form.jg }}（省、市、区）{{form.county}} (县、市)人，现家住 </p></pre>
      <pre><p style="font-size: 20px; text-align: center">{{form.homeaddress}}，该生于{{ form.Intake | formatDate   }}录取到</p></pre>
      <pre><p style="font-size: 20px; text-align: center">我校{{form.college}} 学院 {{form.major}}专业学习，全日制大</p></pre>
      <pre><p style="font-size: 20px; text-align: left">    专三年。</p></pre>
       <pre><p style="font-size: 20px; text-align: left">        特此证明。</p></pre>
      <pre><p style="font-size: 20px; text-align: right">     广西水利电力职业技术学院</p></pre>
      <pre><p style="font-size: 20px; text-align: right;margin-right: 70px"> 学生工作处</p></pre>
       <pre><p style="font-size: 20px; text-align: right"> {{form.xgtime| formatDate}}</p></pre>
      <pre><p style="font-size: 20px; text-align: left">    查询电话：0771-2085115</p></pre> -->
       </div>
      
      <!-- <h1 style="font-size: 16px; text-align: center">
        广西水利电力职业技术学院
      </h1>
      <h2 style="font-size: 30px; text-align: center">补办学生证申请表</h2>
      <table
        align="left"
        border="1"
        width="1000px"
        height="1000px"
        cellspacing="0"
      >
        <tr align="center" height="50px" cellspacing="0">
          <td width="400px">学号</td>
          <td width="200px">
            <div>{{ form.studentId }}</div>
          </td>
          <td width="200px">姓名</td>
          <td width="200px">
            <div>{{ form.name }}</div>
          </td>
          <td width="200px" rowspan="4">一寸照片</td>
        </tr>
        <tr align="center" height="50px">
          <td>性别</td>
          <td>
            <div>{{ form.sex }}</div>
          </td>
          <td>民族</td>
          <td>
            <div>{{ form.nation }}</div>
          </td>
        </tr>
        <tr align="center" height="50px">
          <td>籍贯</td>
          <td>
            <div>{{ form.jg }}</div>
          </td>
          <td>班级</td>
          <td>
            <div>{{ form.className }}</div>
          </td>
        </tr>
        <tr align="center" height="50px">
          <td>出生日期</td>
          <td>
            <div>{{ form.birthday }}</div>
          </td>
          <td>入学年月</td>
          <td>
            <div>{{ form.Intake }}</div>
          </td>
        </tr>
        <tr align="center" height="50px">
          <td>家庭详细地址</td>
          <td>
            <div>{{ form.homeaddress }}</div>
          </td>
          <td>乘火车区间</td>
          <td colspan="2"><div>南宁至{{form.areas}}</div></td>
        </tr>

        <tr rowspan="4" align="center">
          <td>遗失原因说明</td>
          <td colspan="4">
            <div>{{ form.because }}</div>
            <br />
            <div style="text-align: right; margin-right: 100px">
              申请人签名：{{ form.name }}
            </div>
          </td>
        </tr>
        <tr align="center" rowspan="2">
          <td>辅导员审核意见</td>
          <td colspan="4">
            <div>{{ form.fdyopinion }}</div>
            <br />
            <div style="text-align: right; margin-right: 100px">
              辅导员签名：{{ form.fdname }}
            </div>
          </td>
        </tr>
        <tr rowspan="2" align="center">
          <td>学工处审核意见</td>
          <td colspan="4">
            <img style="width:200px;height:200px;margin-right: -300px" src="https://img1.baidu.com/it/u=2477421826,1450951517&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=300">
            <br />
            <div>{{ form.xgopinion }}</div>
            <br />
            
            <div style="text-align: right; margin-right: 100px">
              签字（盖章）：{{ form.xgname }}
            </div>
          </td>
        </tr>
      </table> -->
    </div>

    <!-- 打印按钮 -->
    <el-button style="text-align: center" type="success" @click="doPrint"
      >文件下载</el-button
    >
  </div>
</template>


<script>
import {
  listSchool,
  getSchool,
  delSchool,
  addSchool,
  updateSchool,
} from "@/api/routine/school";
// import html2Canvas from "html2canvas";
// import JsPDF from "jspdf";
import print from "print-js";

// var dayjsTime = dayjs(`${form.Intake}`).format('YYYY-MM-DD HH:mm:ss')

export default {
  name: "School",
  data() {
    return {
      showbacause: false,
      // 显示表格
      showContent: false,
      dialogVisible: false,
      active: 0,
      cheack: "查看",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学生申请表格数据
      schoolList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sex: null,
        identityCard: null,
        studentId: null,
        name: null,
        college: null,
        grade: null,
        stuCreated: null,
        because: null,
        status: null,
        jg: null,
        photo: null,
        birthday: null,
        Intake: null,
        nation: null,
        homeaddress: null,
        fdyopinion: null,
        xgopinion: null,
        xgstatus: null,
        className: null,
        areas: null,
      },
      // 表单参数
      form: {
        status: 0,
        xgstatus: 0,
      },
      // 表单校验
      rules: {
        reason1: [
          { required: true, message: "身份证不能为空", trigger: "blur" },
        ],
        reason2: [
          { required: true, message: "补办原因不能为空", trigger: "blur" },
        ],
        reason3: [{ required: true, message: "学号不能为空", trigger: "blur" }],
        reason4: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        reason5: [{ required: true, message: "请输入性别", trigger: "blur" }],
        reason6: [{ required: true, message: "请输入学院", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();
    this.showData();
  },
  methods: {
    // 打印方法
    doPrint() {
      printJS({
        printable: "print",
        type: "html",
        targetStyles: ["*"],
        style: "@page {margin:2.4cm 2cm ;resolution: 300dpi;}",
        onPrintDialogClose: (this.erexcel = false),
        targetStyles: ["*"],
        font_size: "",

        // style: `@page {size:auto;margin-top:100px;}
        //     thead th {
        //       border-top: 1px solid #000;
        //       border-right: 1px solid #000;
        //       border-left: 1px solid #000;
        //     }
        //     tbody td {
        //       border: 1px solid #000;
        //     }
        //     tbody {
        //       text-align: center;
        //     }
        //     table {
        //       border-collapse: collapse;
        //     }`,
      });
    },
    // 跳转到打印页面
    jump() {
      this.active = 1;
      this.$emit("props", {
        base: false,
        active: 1,
      });
    },
    // 打印方法实现
    // doPrint() {
    //   printJS({
    //     printable: "print",
    //     type: "html",
    //     targetStyles: ["*"],
    //     style: "@page {margin:2.4cm 2cm ;resolution: 300dpi;}",
    //     onPrintDialogClose: (this.erexcel = false),
    //     targetStyles: ["*"],
    //     font_size: "",
    //   });
    // },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 回显数据
    showData() {
      if (this.$route.query.id != undefined) {
        getSchool(this.$route.query.id).then((response) => {
          this.form = response.data;
          // this.active = response.data.status + 1;
        });
      }
    },
    print() {
      this.Print;
    },
    // getPdf(title) {
    //   return new Promise((resolve) => {
    //     html2Canvas(document.querySelector("#resultsHuiZongTableId"), {
    //       allowTaint: false,
    //       useCORS: true, // allowTaint、useCORS只能够出现一个
    //       imageTimeout: 0,
    //       dpi: 300, // 像素
    //       scale: 4, // 图片大小
    //     })
    //       .then(function (canvas) {
    //         // document.body.appendChild(canvas)
    //         // 用于将canvas对象转换为base64位编码
    //         let pageData = canvas.toDataURL("image/jpeg", 1.0),
    //           canvasWidth = canvas.width,
    //           canvasHeight = canvas.height,
    //           concentWidth = 500,
    //           concentHeight = Math.round(
    //             (concentWidth / canvasWidth) * canvasHeight
    //           ),
    //           position = 72,
    //           pageHeight = 892,
    //           height = concentHeight;
    //         console.log(height, pageHeight);
    //         // 新建一个new JsPDF，A3的像素大小 842*1191，A4的像素大小 592*841。这个px像素不准确，不清楚他们的像素大小来源如何
    //         let PDF = new JsPDF("p", "px", "a3");
    //         if (height <= pageHeight) {
    //           // 添加图片
    //           PDF.addImage(
    //             pageData,
    //             "JPEG",
    //             68,
    //             position,
    //             concentWidth,
    //             concentHeight
    //           );
    //         } else {
    //           while (height > 0) {
    //             PDF.addImage(
    //               pageData,
    //               "JPEG",
    //               68,
    //               position,
    //               concentWidth,
    //               concentHeight
    //             );
    //             height -= pageHeight;
    //             position -= pageHeight;
    //             if (height > 0) {
    //               PDF.addPage();
    //             }
    //           }
    //         }
    //         // pdf.addImage(canvas.toDataURL('public\bed.png'), 'PNG', x, y, width, height);
    //         // 保存 pdf 文档
    //         PDF.save(`${title}.pdf`);
    //         resolve(true);
    //       })
    //       .catch(() => {})
    //       .finally(() => {
    //         this.pdfExporting = false;
    //         console.log(88888);
    //       });
    //   });
    // },
    next() {
      if (this.form != null) this.active = 0;
    },
    /** 查询学生申请列表 */
    getList() {
      this.loading = true;
      listSchool(this.queryParams).then((response) => {
        this.schoolList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        sex: null,
        identityCard: null,
        studentId: null,
        name: null,
        college: null,
        grade: null,
        stuCreated: null,
        because: null,
        status: null,
        jg: null,
        photo: null,
        birthday: null,
        Intake: null,
        nation: null,
        homeaddress: null,
        fdyopinion: null,
        xgopinion: null,
        xgstatus: null,
        className: null,
        areas: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加学生申请";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getSchool(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改学生申请";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateSchool(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSchool(this.form).then((response) => {
              this.$modal.msgSuccess("申请提交成功,请等待审批");
              this.open = false;
              this.getList();
              // this.active = 1;
              // this.$emit("props", {
              //   base: false,
              //   active: 1,
              // });
              // this.$router.push({
              //   path: "/routine/school/application",
              // });
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除学生申请编号为"' + ids + '"的数据项？')
        .then(function () {
          return delSchool(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "routine/school/export",
        {
          ...this.queryParams,
        },
        `school_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style>
@media print {
  ::v-deep table {
    table-layout: auto !important;
  }
  ::v-deep .el-table__header-wrapper .el-table__header {
    width: 99% !important;
  }
  ::v-deep .el-table__body-wrapper .el-table__body {
    width: 98% !important;
  }
  ::v-deep .el-table__fixed {
    display: none;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
    width: 90px !important;
  }
  ::v-deep .el-form-item__content {
    margin-left: 90px !important;
  }
  ::v-deep .el-select__caret {
    opacity: 0;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
    width: 90px !important;
  }
}
</style>
